<template>
  <div class="sucess">
    <div class="sucess_icon">
      <p><img src="../../../static/vip/sucess.png" alt=""></p>
    </div>
    <div class="jion_info">
      <p class="grade">加入会员等级：<span>{{formatterType(Number(info.gradeCode))}} </span> 成功</p>
      <p class="date" v-if="info.expireMode==1">有效期：{{`${info.startTime }`}} 至 {{`${ info.expireTime}`}}</p>
      <div class="time" v-if="info.expireMode==2">
        <p>有效期：{{`${info.effectStartDate}`}} 至 {{`${info.effectEndDate}`}}</p>
        <p>每日{{info.effectStartTime}}至{{info.effectEndTime}}</p>
      </div>
    </div>
    <div class="action_btn" @click="goBack">
      <p>返回</p>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return { 
      info:''
    }
  },
  created(){
    this.info=JSON.parse(this.$route.query.data) ||''
  },
  methods:{
    goBack(){ 
      location.href=window.location.origin+`/${this.enterpriseId}/my`
    },
     // 格式化用户类型
    formatterType(gradeCode) {
      const types = {
        1: "普卡",
        2: "银卡",
        3: "金卡",
        4: "钻卡",
        5: "黑卡",
        s: "超级会员"
      };
      return types[gradeCode] || "";
    },
  }
}
</script>

<style lang="scss" scoped>
.sucess{ 
  height: 100vh;
  overflow: auto;
  .sucess_icon{ 
    display:flex;
    align-items: center;
    justify-content: center;
  }
  .jion_info{ 
    margin-top: 40px;
    text-align: center;
    .grade{ 
      font-size: 15px;
      color: #333;
      span{ 
        color: #4783ff;
      }
    }
    .date{ 
      color: #999;
      font-size: 14px;
    }
    .time{ 
      color: #999;
      font-size: 14px;
    }
  }
  .action_btn{ 
    color: #fff;
    font-size: 14px;
    padding: 2px 0;
    background-color: #35b22a;
    text-align: center;
    margin: 30px 16px;
    border-radius: 6px;
  }
}
</style>